<!-- Footer -->

<footer>
    <div class="row">
        <div class="twelve columns">
            <p class="logo-ccc"><img src="{{ MEDIA_URL }}images/logo-ccc.png" /></p>
            <hr />
            <div class="row">
                <div class="twelve columns">
                    <ul class="link-list nav-footer">
                        <li><a href="{% url WebSite.views.homepage %}">Home</a></li>
                        <li><a href="{% url WebSite.views.about %}">Sobre</a></li>
                        <li><a href="#">Quiz</a></li>
                        <li><a href="{% url WebSite.views.news %}">Notícias</a></li>
                        <li><a href="{% url WebSite.views.spellingBook %}">Cartilha</a></li>
                        <li><a href="{% url WebSite.views.doubts %}">Dúvidas</a></li>
                        <li><a href="{% url WebSite.views.contact %}">Contato</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Included JS Files (Uncompressed) -->
<!--

<script src="javascripts/jquery.js"></script>

<script src="javascripts/jquery.foundation.mediaQueryToggle.js"></script>

<script src="javascripts/jquery.foundation.forms.js"></script>

<script src="javascripts/jquery.foundation.reveal.js"></script>

<script src="javascripts/jquery.foundation.orbit.js"></script>

<script src="javascripts/jquery.foundation.navigation.js"></script>

<script src="javascripts/jquery.foundation.buttons.js"></script>

<script src="javascripts/jquery.foundation.tabs.js"></script>

<script src="javascripts/jquery.foundation.tooltips.js"></script>

<script src="javascripts/jquery.foundation.accordion.js"></script>

<script src="javascripts/jquery.placeholder.js"></script>

<script src="javascripts/jquery.foundation.alerts.js"></script>

<script src="javascripts/jquery.foundation.topbar.js"></script>

-->

<!-- Included JS Files (Compressed) -->
<script src="{{ MEDIA_URL }}javascripts/jquery.js"></script>
<script src="{{ MEDIA_URL }}javascripts/foundation.min.js"></script>

<!-- Initialize JS Plugins -->
<script src="{{ MEDIA_URL }}javascripts/app.js"></script>

<script type="text/javascript">
    $('#slider').orbit({
        animation: 'horizontal-push',                  // fade, horizontal-slide, vertical-slide, horizontal-push
        animationSpeed: 800,                // how fast animtions are
        timer: false, 			 // true or false to have the timer
        resetTimerOnClick: false,           // true resets the timer instead of pausing slideshow progress
        advanceSpeed: 4000, 		 // if timer is enabled, time between transitions
        pauseOnHover: true, 		 // if you hover pauses the slider
        startClockOnMouseOut: false, 	 // if clock should start on MouseOut
        startClockOnMouseOutAfter: 1000, 	 // how long after MouseOut should the timer start again
        directionalNav: false, 		 // manual advancing directional navs
        captions: false, 			 // do you want captions?
        captionAnimation: 'fade', 		 // fade, slideOpen, none
        captionAnimationSpeed: 800, 	 // if so how quickly should they animate in
        bullets: true,			 // true or false to activate the bullet navigation
        bulletThumbs: false,		 // thumbnails for the bullets
        bulletThumbLocation: '',		 // location from this file where thumbs will be
        afterSlideChange: function(){}, 	 // empty function
        fluid: '16x6'                         // or set a aspect ratio for content slides (ex: '4x3')
    });
</script>

</body>
</html>